<template>
    <div id="app">
        <!--<div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link> |
            <router-link to="/zcj-demo">zcjDemo</router-link> |
            <router-link to="/pull-up-demo">pullUpDemo</router-link> |
            <router-link to="/form-demo">formDemo</router-link>|
            <router-link to="/count-down-demo">倒计时</router-link>
        </div>-->

        <!-- 根据meta.keepAlive区分缓存组件 -->
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />

        <!-- 根据meta.tab区分是否显示底栏tab -->
        <!--<tabber v-show="$route.meta.tab" :tabs="tabs"></tabber>-->

        <GlobaLoading :global-state="globalState" />
        <Loading :state="loading" />
    </div>
</template>
<script>
import apis from 'common/api';
import GlobaLoading from 'base/GlobalLoading';
import Loading from 'base/Loading';
import tabber from 'base/Tabber';

export default {
    components: {
        GlobaLoading,
        Loading,
        tabber
    },
    data() {
        return {
            loading: false,
            globalState: false
        };
    },
    created() {
        // 全局loading
        this.$root.globalshow = () => {
            this.globalState = true;
        };
        this.$root.globalhide = () => {
            this.globalState = false;
        };
        // 局部loading
        this.$root.show = () => {
            this.loading = true;
        };
        this.$root.hide = () => {
            this.loading = false;
        };

        // ★★★挂载全局api
        for (const key in apis) {
            this.$root[key] = apis[key];
        }
    },
    methods: {}
};
</script>
<style lang="stylus">
#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
